<!--
 * @Descripttion:活动报表
 * @version:
 * @Author: ada.wu
 * @Date:2024-03-11 11:26:44
 * @LastEditors: ada.wu
 * @LastEditTime: 2024-04-09 15:01:10
-->
<template>

  <div class="hub">
    <div class="m-t">
      <div style="position: relative;">
        <div class="t-c p-tb">
          <img src="/@/assets/report/activity.svg">
        </div>
        <img src="/@/assets/report/activity-tag.svg" style="position: absolute;right: 6px;top:6px;">
        <div class="radius m-tb m-lr-xs bg-white p-lr-sm p-tb">
          <van-skeleton title :row="6" v-show="isQuery" />
          <table class="vux-table" v-show="!isQuery">
            <thead>
              <tr class="bg-head">
                <th class="t-c t-lg p-tb-sm t-m-x text-base" width='17%' colspan="6">{{activityName}}</th>
              </tr>
              <tr>
                <th class="t-c" width='17%' style="line-height: 1.2;">时间</th>
                <th class="t-c" width='17%' colspan="5">{{activityDto.startDate}}~{{activityDto.endDate}}</th>
              </tr>
              <tr class="bg-white">
                <th class="t-c" width='17%' style="line-height: 1.2;">回收率</th>
                <th class="t-c" width='17%' colspan="5">{{activityDto.recoveryRate||'0%'}}</th>
              </tr>
              <tr>
                <th class="t-c" width='17%' style="line-height: 1.2;">参与人员</th>
                <th class="t-c" width='17%'>上级</th>
                <th class="t-c" width='17%'>平级 </th>
                <th class="t-c" width='17%'>下级</th>
                <th class="t-c" width='16%'>映射</th>
                <th class="t-c" width='16%'>综合</th>
              </tr>
            </thead>
            <tbody>
              <tr class="tr-bg" v-for="(item,index) in activityDto.evaluatedPersionList" :key="index">
                <th class="t-c" width='17%' style="line-height: 1.2;">{{item.evaluatedName}}</th>
                <th class="t-c" width='17%'>{{item.superior}}</th>
                <th class="t-c" width='17%'>{{item.sameLevel}} </th>
                <th class="t-c" width='17%'>{{item.subordinate}}</th>
                <th class="t-c" width='16%'>{{item.mapping}}</th>
                <th class="t-c" width='16%'>{{item.total}}</th>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

</template>
<script lang="ts">
import { Search, PullRefresh, Divider } from "vant";
//util
import { onMounted, reactive, toRefs, ref, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getNewObj } from "/@/util";

//api
import { activityReportMobile } from "/@/api/ExamApi";

export default {
  name: "activityDetail",
  components: {
    [Search.name]: Search,
    [Divider.name]: Divider,
    [PullRefresh.name]: PullRefresh,
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    console.log("route.query==", route.query);
    let {
      activityId = "",
      valuatorUserId = "",
      activityName = "",
    } = route.query;

    const state = reactive({
      isQuery: false,
      activityName,
      searchKey: "",
      queryParam: {
        activityId, //活动ID
        valuatorUserId,
        activityName: "", //活动名称，左lisk
        pageNumber: 1, //当前页
        pageSize: 10, //分页大小
      },
      activityDto: {
        startDate: "",
        endDate: "",
        recoveryRate: "",
        evaluatedPersionList: [
          // {
          //   evaluatedName: "fs",
          //   evaluatedUserId: "11",
          //   superior: 0,
          //   subordinate: 0,
          //   sameLevel: 0,
          //   mapping: 0,
          //   total: 0.0,
          // },
        ],
      },
    });
    onMounted(() => {
      nextTick(() => {
        queryList();
      });
    });

    const queryList = () => {
      // if (state.isQuery) return;
      state.isQuery = true;
      let { queryParam } = getNewObj(state);
      activityReportMobile({
        ...queryParam,
      })
        .then((res: any) => {
          if (res) {
            state.activityDto = res.content;
          } else {
            // state.listData = [];
            // state.listFinished = true;
          }
        })
        .catch(() => {})
        .finally(() => {
          state.isQuery = false;
        });
    };

    return {
      ...toRefs(state),
    };
  },
};
</script>

<style lang="scss" scoped>
::v-deep(.van-cell) {
  align-items: center;
}

::v-deep(.van-hairline--top-bottom:after) {
  border-width: 0 0 1px 0;
  right: -42%;
  left: -42%;
}
</style>
